<script setup>
  import CartCard from '@/components/cart/CartCard.vue'
  import { useRouter } from 'vue-router';
  import { useCartStore } from '@/stores/cart';

  const router = useRouter();

  const carStore = useCartStore()
  
  const orderConfirm = (name)=>{
    router.push({
      path:'/goCount',
      query:{
        shopName:name
      }
    })
  }
</script>

<template>
  <div class="cart_list">
      <div class="cart_list_header">我的全部购物车
        <span>{{ carStore.cartList.length }}</span>
      </div>
      <div class="cart_list_content" v-for= "item in carStore.cartList" :key="item.name">
          <div class="cart_list_content_item">
              <CartCard :item="item" @click="orderConfirm(item.name)"/>
          </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: .5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
      padding: .08rem .18rem;
      font-size: .16rem;
      color: $content-fontcolor;
      text-align: center;
      line-height: .24rem;
      background-color: $bgColor;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
  }

  &_content {
      margin-top: .58rem;
  }
}
</style>